<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>The Imaginet Directory App</title>
		<meta name="description" content="Source Code for Blending User Experiences with IE9 on davidwesst.com" />
		<meta name="author" content="David Wesst" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
		
        <link rel="shortcut icon" href="favicon.ico" />
		<link type="text/css" rel="stylesheet" href="css/style.css" />

        <!-- Jumplist for Desktop Experience -->
        <meta name="msapplication-task"
        content="name=David Wesst;
        action-uri=http://localhost:1370/SampleApp.Web/index.html?contact=0;
        icon-uri=favicon.ico" />
     
        <meta name="msapplication-task"
        content="name=Ryan Caliguiri;
        action-uri=http://localhost:1370/SampleApp.Web/index.html?contact=1;
        icon-uri=favicon.ico" />
     
        <meta name="msapplication-task"
        content="name=Miguel Carrasco;
        action-uri=http://localhost:1370/SampleApp.Web/index.html?contact=2;
        icon-uri=favicon.ico" />

	</head>
	<body>
		<div id="content" >
			<header class="app-header" >
                <div class="logo-wrapper">
                    <img id="logo" alt="Imaginet Logo" src="img/imaginetlogo-white.png" />
                </div>
				<h1 class="app-name" >Expert Directory App</h1>	
			</header>
			<aside class="contact-list" >
                <p class="notes" >
                    Select the name of one of experts to view their contact details.
                </p>
				<ul id="contactList" >
					<!-- Contacts will be place here dynamically -->
				</ul>
			</aside>
			<section class="contact-card" >
				<article class="contact-info" >
                    <div class="contact-images" >
                        <div class="contact-image">
						    <img id="contactImage" src="img/contact-sample.png" />
					    </div>
                        <div class="contact-methods" >
						    <ul id="contactMethods">
							    <li><a id="contactTwitter" class="icon-disabled" href="javascript:void()" ><img class="icon" src="img/twitter.png" alt="Twitter" /></a></li>
							    <li><a id="contactFacebook" class="icon-disabled" href="javascript:void()" ><img class="icon" src="img/facebook.png" alt="Facebook" /></a></li>
							    <li><a id="contactLinkedIn" class="icon-disabled" href="javascript:void()" ><img class="icon" src="img/linkedin.png" alt="LinkedIn" /></a></li>
							    <li><a id="contactBlog" class="icon-disabled" href="javascript:void()" ><img class="icon" src="img/blog.png" alt="Blog" /></a></li>
						    </ul>
					    </div>
                    </div>					
                    <div class="contact-text" >
                        <div>
                            <h3>
                                <span id="contactName"></span>
                            </h3>
					    </div>
					    <div>
                            <h4>
                                <span id="contactFocus">Select an Imaginet Expert from the directory on the left to view their details</span>
                            </h4>
					    </div>
					    <div class="contact-bio">
                            <p>
                                <span id="contactBio"></span>
                            </p>
					    </div>
                    </div>
                </article>
                <article class="contact-bio" >
				</article>
			</section>
		</div>
		<footer>
			<p class="notes" >
				This application was produced by <a href="http://davidwesst.com/">David Wesst</a> for the article <a href="http://davidwesst.com">Multi-Platform Apps with HTML5 and IE9</a>
			</p>
		</footer>
		
		<!-- Scripts -->
		<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
		<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js"></script>
		<script src="src/contact.js" ></script>
		<script src="src/main.js"></script>
		 
	</body>
</html>